<template lang="pug">
.grid_box
    el-row
        el-col(v-for="(item, index) in contents" :span='4' :key="index")
            .grid-content.bg-purple-light(plain @click="open2")
                .grid_row
                    span {{item.serial}}
                    |{{item.number}}
                .grid_row 
                    strong {{item.name}}
                .grid_row
                    span {{item.price_d}}
                    |{{item.price_m}}
                .tag_box {{item.tag}}

</template>

<script>
  export default {
    props: {
      isCol: {
        type: Boolean,
        default: true
      },
      content: {
        type: Array,
        default: function () {
          return []
        }
      }
    },
    data () {
      return {
        contents: this.content,
        isCols: this.isCol
      }
    },
    methods: {
      // 详情弹出
      open2 () {
        this.$notify({
          title: '',
          dangerouslyUseHTMLString: true,
          message: '房源详情',
          duration: 0
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import '../../../assets/scss/_variables.scss';
  .grid_box {
    line-height: 1.5;
    .el-row {
      margin-bottom: 20px;
      &:last-child {
        margin-bottom: 0;
      }
    }
    .el-col {
      border-radius: 4px;
    }
    
    .el-col-4 {
        width: 19%;
        margin-right: 8px;
        margin-bottom: 8px;
    }
    .bg-purple-dark {
      background: #99a9bf;
    }
    .bg-purple {
      background: #d3dce6;
    }
    .bg-purple-light {
      background: #F2F6FC;
      &:hover {
         background: #e5e9f2; 
      }
    }
    .grid-content {
      position: relative;
      border-radius: 4px;
      min-height: 36px;
      padding: 10px;
      cursor: pointer;
      .tag_box {
        width: 25px;
        height: 25px;
        background: $--color-primary;
        border-radius: 50px;
        text-align: center;
        line-height: 25px;
        color: #fff;
      }
    }
    .row-bg {
      padding: 10px 0;
      background-color: #f9fafc;
    }
    .col_head_title {
      padding: 10px;
    }
    .grid_body {
      font-size: 20px;
    }
    .grid_row {
        strong {
            font-size: 16px;
            line-height: 40px;
        }
        span {
            float: right;
        }
    }
    .font30 {
      font-size: 30px;
    }
  }
</style>

